import React, { ReactElement, useEffect } from 'react';

// 引入样式
import styles from './index.less';
// 引入 antd 组件
import { Form, Input, Button, Checkbox } from 'antd';
import { Link } from 'react-router-dom';
import { connect } from 'react-redux';

interface Props {}

// 用户类型验证
interface user {
  username: string;
  password: string;
  remember: boolean;
}

function index(props: any): ReactElement {
  // console.log(props);
  let { loginData } = props;

  const onFinish = async (values: user) => {
    console.log('onFinish:', values);
    const { remember } = values;
    if (remember) {
      props.dispatch({
        type: 'loginUserInfo/loginSaga',
        payload: values,
      });
    }
  };

  useEffect(() => {
    console.log(loginData);
    if (loginData) {
      let { token, user, config } = loginData.data.data;
      localStorage.token = token;
      localStorage.config = JSON.stringify(config);
      localStorage.userInfo = JSON.stringify(user);
      window.location.href = '/home';
    }
  }, [loginData]);

  const onFinishFailed = (errorInfo: any) => {
    console.log('Failed:', errorInfo);
  };

  const toApplt = () => {
    console.log(112);

    console.log(props);
  };
  return (
    <div className={styles.container}>
      <div className={styles.form}>
        <div className={styles.form_title}>
          <img
            src="https://pic3.zhimg.com/v2-c267e029fe4d9b08043662ff730ad2c7_r.jpg?source=1940ef5c"
            alt=""
            className={styles.logo}
          />
        </div>
        <div className={styles.form_content}>
          <Form
            name="basic"
            labelCol={{ span: 8 }}
            wrapperCol={{ span: 18 }}
            initialValues={{
              username: 'bobo',
              password: '1234qwer',
              remember: true,
            }}
            onFinish={onFinish}
            onFinishFailed={onFinishFailed}
            autoComplete="off"
          >
            <Form.Item
              label="用户名"
              name="username"
              rules={[{ required: true, message: '请输入用户名' }]}
            >
              <Input />
            </Form.Item>

            <Form.Item
              label="密码"
              name="password"
              rules={[{ required: true, message: '请输入密码' }]}
            >
              <Input.Password />
            </Form.Item>

            <Form.Item
              name="remember"
              valuePropName="checked"
              wrapperCol={{ offset: 8, span: 16 }}
            >
              <Checkbox>请阅读并遵守用户使用协议...</Checkbox>
            </Form.Item>

            <Form.Item wrapperCol={{ offset: 6, span: 18 }}>
              <Link to="/applt">applt</Link>
              <Button
                type="primary"
                htmlType="submit"
                style={{ marginLeft: 100 }}
              >
                登录
              </Button>
            </Form.Item>
          </Form>
        </div>
      </div>
    </div>
  );
}

const mapStateToProps = (state: { loginUserInfo: { loginData: any } }) => ({
  loginData: state.loginUserInfo.loginData,
});

export default connect(mapStateToProps)(index);
